<template>
  <div class="set-item">
    <div class="title">{{title}}</div>
    <div class="flex justify-between">
      <div class="desc flex-1">{{desc}}</div>
      <q-btn v-if="showBtn" style="width: 96px; min-height: 32px; font-size: 16px; padding: 0 16px"
             class="btn" label="保存" color="primary" @click="save()" />
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'set-item',
  props: {
    title: {
      type: String
    },
    desc: {
      type: String,
      default: ''
    },
    showBtn: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    save () {
      this.$emit('save')
    }
  }
}
</script>

<style scoped lang="stylus">
.set-item{
  background-color #ffffff
  padding 0 20px 40px
  border-radius 6px
  position relative
  .title{
    padding 16px 0 15px
    line-height 1
    border-bottom 1px solid #d3d3d3
    font-size 14px
    font-weight bold
    color #333
  }
  .desc{
    padding 15px 20px 40px 0
    line-height 1.5
    font-size 14px
    color #999
  }
  .btn{
    height 32px
    margin-top 20px
    /*position absolute*/
    /*right 20px*/
    /*top 68px*/
  }
}
</style>
